<template>
    <div class="searchView">
        <!-- 头部 -->
        <van-search v-model="searchVal" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel"
            @click-left-icon="getSearchList" />
        <!-- 列表 -->
        <div class="search-list-box">
            <div @click="GoblogContent(item.content_id)" class="blogItem_box" v-for="item in searchList">
                <div class="blogItem-imgbox">
                    <img v-lazy="item.cove_image ? item.cove_image : 'https://s1.ax1x.com/2023/04/03/ppfxklD.png'" alt="">
                </div>
                <div class="blogItem-textbox">
                    <div class="article-title-class">
                        <!-- <p>{{ item.article_class }}</p> -->
                        <van-text-ellipsis rows=2 :content="item.title" />
                    </div>
                    <van-text-ellipsis class="blogItem-describe" rows=2 :content="item.article_describe" />
                    <div class="blogItem-botbox">
                        <p>{{ item.create_timer }}</p>
                        <div><van-icon name="eye-o" />
                            <p>{{ item.look_count }}</p>
                        </div>
                        <span>{{ item.article_class }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="searchList-not" v-if="searchList.length == 0">搜不到想要内容？换个关键词试试</div>
    </div>
</template>
<script setup>
import { getSearch } from "@/api/request";
import { useStore } from "../store";
import { storeToRefs } from "pinia";
import { ref, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
const router = useRouter()
const store = useStore()

let { searchVal } = storeToRefs(store)
const searchList = ref([])

onMounted(() => {
    getSearch({
        title: searchVal.value
    }).then(({ data }) => {
        console.log('1111', data.data);
        let newArr = data.data.slice(0, 9)
        searchList.value = newArr;

    })

})

// 回车触发
const onSearch = () => {
    getSearch({
        title: searchVal.value
    }).then(({ data }) => {
        console.log(data);
        searchList.value = data.data
    })
}
// 搜索图标触发
const getSearchList = () => {
    getSearch({
        title: searchVal.value
    }).then(({ data }) => {
        console.log(data);
        searchList.value = data.data
    })
}

// 取消按钮
const onCancel = () => {
    router.replace('/')
}

// 跳转页面
const GoblogContent = (id) => {
    router.push({
        path: "/blogContent",
        query: {
            blogItemID: id,
        }
    })
}
</script>

<style lang="scss">
.searchView {
    padding: 3.125rem 0 0;

    .searchList-not {
        text-align: center;
        margin: .625rem 0;
    }

    // 头部
    .searchHead {
        text-align: center;
        line-height: 5rem;
        height: 5rem;
        background-color: #ecf9ff;

        span {
            color: #4f9cfb;
        }
    }

    // 内容区
    .search-list-box {
        .blogItem_box {
            padding: .875rem .625rem;
            margin: .875rem .625rem;
            border-radius: .375rem;
            box-sizing: border-box;
            display: flex;
            // box-shadow: var(--boxshadow);
            background-color: white;

            .blogItem-imgbox {
                img {
                    width: 6.25rem;
                    height: 6.25rem;
                    border-radius: .75rem;
                }
            }


            .blogItem-textbox {
                width: 100%;
                margin-left: 10px;
                position: relative;

                >.article-title-class {

                    .van-text-ellipsis {
                        font-size: .9375rem;
                        font-weight: bold;
                        line-height: 1.25rem;
                    }

                }

                // 描述
                .blogItem-describe {
                    // margin: 4px 0;
                    font-size: .8125rem;
                    color: #aaa;
                    margin: 0 0 1.25rem;
                }

                // 最底部
                .blogItem-botbox {
                    width: 100%;
                    position: absolute;
                    bottom: 0;
                    margin: 0;
                    display: flex;
                    align-items: center;

                    >div {
                        display: flex;
                        align-items: center;
                        margin-left: .625rem;

                        p {
                            margin-left: .125rem;
                        }
                    }

                    p {
                        font-size: .75rem;
                        margin: 0;
                    }

                    span {
                        font-size: .75rem;
                        color: #fff;
                        background-color: var(--motifColor);
                        padding: .125rem .25rem;
                        border-radius: .375rem;
                        position: absolute;
                        top: 0;
                        right: 0;
                    }
                }
            }

        }
    }
}
</style>